<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="filterId"
        placeholder="请输入员工ID"
        style="width: 200px; margin-right: 10px;"
        clearable
      ></el-input>
      <el-input
        v-model="filterName"
        placeholder="请输入员工姓名"
        style="width: 200px; margin-right: 10px;"
        clearable
      ></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="loadAttendanceData"
        :loading="loading"
      >查询</el-button>
    </div>

    <el-calendar v-model="currentDate">
      <template slot="dateCell" slot-scope="{date, data}">
        <div
          class="calendar-cell"
          :class="getStatusClass(data.day)"
          @click="showDetail(data.day)"
        >
          <div class="date-number">
            {{ data.day.split('-').slice(2).join('') }}
          </div>
          <div v-if="attendanceRecords[data.day]" class="status-text">
            {{ getStatusText(attendanceRecords[data.day]) }}
          </div>
        </div>
      </template>
    </el-calendar>

    <template v-if="Object.keys(attendanceRecords).length === 0 && !loading">
      <div class="empty-tip">
        <i class="el-icon-data-line"></i>
        <p>暂无考勤数据</p>
      </div>
    </template>
  </div>
</template>

<script>
import { getMonthRecordsById } from "@/api/system/records";

export default {
  name: "RecordsCheck",
  data() {
    return {
      currentDate: new Date(),
      attendanceRecords: {},
      filterId: '',
      filterName: '',
      loading: false,
      statusTextMap: {
        NORMAL: '正常',
        LATE: '迟到',
        ABSENT: '缺勤'
      }
    };
  },
  created() {
    this.loadAttendanceData();
  },
  methods: {
    getStatusText(status) {
      return this.statusTextMap[status] || status;
    },

    async loadAttendanceData() {
      this.loading = true;
      try {
        if (this.filterId) {
          const res = await getMonthRecordsById(this.filterId);
          this.processResponse(res);
        } else if (this.filterName) {
          const res = await getMonthRecordsByName(this.filterName);
          this.processResponse(res);
        } else {
          const res = await getMonthRecordsById(102); // 默认用户
          this.processResponse(res);
        }
      } catch (error) {
        this.$message.error('获取考勤数据失败');
      } finally {
        this.loading = false;
      }
    },

    processResponse(res) {
      if (res.code === 200) {
        const formattedData = {};
        res.data.forEach(item => {
          if (item.workDate && item.status) {
            const date = new Date(item.workDate);
            const dateStr = this.formatDate(date);
            formattedData[dateStr] = item.status;
          }
        });
        this.attendanceRecords = formattedData;
      } else {
        this.$message.error(res.msg || '获取考勤数据失败');
      }
    },

    getStatusClass(day) {
      const status = this.attendanceRecords[day];
      return status ? `status-${status.toLowerCase()}` : '';
    },

    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    showDetail(day) {
      if (this.attendanceRecords[day]) {
        this.$message.info(`${day}: ${this.getStatusText(this.attendanceRecords[day])}`);
      }
    }
  },
  watch: {
    currentDate: {
      handler() {
        this.loadAttendanceData();
      },
      deep: true
    }
  }
};
</script>

<style scoped>
.app-container {
  background-color: #f5f7fa;
  padding: 20px;
  border-radius: 8px;
}

.filter-container {
  background-color: white;
  padding: 15px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.el-calendar {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.calendar-cell {
  height: 80px;
  padding: 8px;
  text-align: center;
  border-radius: 6px;
  font-size: 14px;
  color: #606266;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 1px solid #ebeef5;
  margin: 2px;
}

.el-calendar-table td.is-selected .calendar-cell {
  border: 2px solid #409eff;
}

.date-number {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.status-text {
  font-size: 12px;
  padding: 2px 5px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.2);
}

.status-normal {
  background-color: #a0d468 !important;
  color: white !important;
}

.status-late {
  background-color: #ffce54 !important;
  color: white !important;
}

.status-absent {
  background-color: #ed5565 !important;
  color: white !important;
}

.calendar-cell:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.empty-tip {
  text-align: center;
  padding: 40px;
  color: #909399;
  font-size: 16px;
}
.empty-tip i {
  font-size: 40px;
  margin-bottom: 10px;
}
</style>
